Сохраненная страница Как нарисовать линию в HTML5 (Canvas) (28 Kb)
// ------------------
// Объект для рисования в канвасе
// HTML5.Canvas
// ------------------
function ExpangeCanvas(canvasid, width, height)
{
// ------------------
// Переменные ширины и высоты
// Хотя canvas ставит значения по-умолчанию 300 на 150
// ------------------
width = width || 300;
height = height || 150;
// ------------------
// Находим нужный канвас
// ------------------
this.canvas = document.getElementById(canvasid);
this.obCanvas = null;
if (this.canvas != null)
{
// ------------------
// Устанавливаем размеры канваса
// ------------------
this.canvas.width = width;
this.canvas.height = height;
// ------------------
// Контекст канваса
// ------------------
this.obCanvas = this.canvas.getContext('2d');
}
// ------------------
// Рисуем линию
// ------------------
this.Line = function(x1, y1, x2, y2, linewidth, strokestyle)
{
if (this.obCanvas == null) return false;
this.obCanvas.beginPath();
this.obCanvas.lineWidth = linewidth;
this.obCanvas.strokeStyle = strokestyle;
this.obCanvas.moveTo(x1, y1);
this.obCanvas.lineTo(x2, y2);
this.obCanvas.stroke();
}
// ------------------
// Функция заливает канвас цветом
// ------------------
this.SetBgColor = function(bgcolor)
{
if (this.obCanvas == null) return false;
this.obCanvas.fillStyle = bgcolor;
this.obCanvas.fillRect(0, 0, this.obCanvas.canvas.width, this.obCanvas.canvas.height);
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Как нарисовать линию в HTML5 (Canvas)</title>
<script src="ExpangeCanvas.js"></script>
<script>
function ExampleCanvas()
{
// Толстая красная линия на сером фоне
var draw = new ExpangeCanvas('line1', 400, 200);
draw.SetBgColor('#CCC');
draw.Line(10, 190, 390, 10, 10, '#600');
// Тонкая белая линия на черном фоне
var draw2 = new ExpangeCanvas('line2', 400, 200);
draw2.SetBgColor('#000');
draw2.Line(10, 10, 390, 190, 2, 'white');
// Горизонтальная красная линия на светло-желтом фоне
var draw3 = new ExpangeCanvas('line3', 400, 200);
draw3.SetBgColor('#FFE');
draw3.Line(10, 100, 390, 100, 3, 'red');
// Вертикальная зеленая линия на светло-зеленом фоне
var draw4 = new ExpangeCanvas('line4', 400, 200);
draw4.SetBgColor('#EFE');
draw4.Line(200, 10, 200, 190, 5, 'green');
}
</script>
</head>
<body onLoad="ExampleCanvas()">
<canvas id="line1"></canvas>
<canvas id="line2"></canvas>
<canvas id="line3"></canvas>
<canvas id="line4"></canvas>
</body>
</html>
